<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>IVT绩效考核系统管理后台</title>
    <link href="css/admin-styles.css" rel="stylesheet">
</head>
<body>
<!-- 头部组件容器 -->
<div id="header-container"></div>

<div class="container">
    <!-- 侧边栏组件容器 -->
    <div id="sidebar-container"></div>

    <div class="main-content">
        <!-- 页面内容容器 -->
        <div id="page-content-container">
            <!-- 默认显示数据统计页面 -->
            <div id="dashboard-container"></div>
        </div>
    </div>
</div>

<!-- 模态框组件容器 -->
<div id="modal-container"></div>

<!-- 加载脚本 -->
<script src="js/component-loader.js"></script>
<script src="js/common.js"></script>
<script src="js/dashboard.js"></script>
<script src="js/base-info.js"></script>
<script src="js/evaluation-content.js"></script>
<script src="js/evaluation-relation.js"></script>
<script src="js/evaluation-score.js"></script>
<script src="js/data-export.js"></script>

<script>
// 页面初始化
document.addEventListener('DOMContentLoaded', async function() {
    // 加载基础组件
    await ComponentLoader.loadComponents([
        { path: 'components/header.html', target: '#header-container' },
        { path: 'components/sidebar.html', target: '#sidebar-container' },
        { path: 'components/modal.html', target: '#modal-container' },
        { path: 'pages/dashboard.html', target: '#dashboard-container' }
    ]);

    // 初始化应用
    initializeApp();
});

// 重写showContent函数以支持组件化页面加载
async function showContent(contentId) {
    // 更新菜单状态
    document.querySelectorAll('.menu-item').forEach(item => {
        item.classList.remove('active');
    });

    // 找到对应的菜单项并激活
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(item => {
        if (item.getAttribute('onclick') && item.getAttribute('onclick').includes(contentId)) {
            item.classList.add('active');
        }
    });

    // 隐藏所有内容区域
    document.querySelectorAll('.content-area').forEach(area => {
        area.classList.remove('active');
    });

    // 清空页面容器
    const pageContainer = document.getElementById('page-content-container');

    // 根据contentId加载对应的页面组件
    let pageComponent = '';
    switch(contentId) {
        case 'dashboard':
            pageComponent = 'pages/dashboard.html';
            break;
        case 'dept-info-management':
        case 'teacher-info-management':
        case 'position-type-management':
        case 'teacher-position-management':
            pageComponent = 'pages/base-info.html';
            break;
        case 'evaluation-content-management':
        case 'evaluation-type-management':
            pageComponent = 'pages/evaluation-content.html';
            break;
        case 'evaluation-relation-management':
            pageComponent = 'pages/evaluation-relation.html';
            break;
        case 'evaluation-score-management':
            pageComponent = 'pages/evaluation-score.html';
            break;
        case 'data-export':
            pageComponent = 'pages/data-export.html';
            break;
        default:
            console.warn('Unknown content ID:', contentId);
            return;
    }

    // 加载页面组件
    await ComponentLoader.loadComponent(pageComponent, '#page-content-container');

    // 显示对应的内容区域
    const targetContent = document.getElementById(contentId);
    if (targetContent) {
        targetContent.classList.add('active');
    }

    // 更新当前页面
    currentPage = contentId;

    // 加载页面数据
    loadPageData(contentId);
}

</script>
</body>
</html>
